<!-- 表格筛选 -->
<template>
	<div class="mine-table-screen">
		<el-popover
		popper-class="mine-screen-popper"
    placement="bottom"
    width="180"
    trigger="click"
    v-model="popoverVisable">
    <el-radio-group v-model="radioValue" v-if="isRadio">
      <el-radio
        @change="screenSubmit"
        v-for="(item, index) in list"
        :key="index"
        :label="item.id">
        {{ item.name }}
      </el-radio>
    </el-radio-group>
		<el-checkbox-group v-model="screenList" v-else>
			<el-checkbox @change="screenSubmit" v-for="(item, index) in list" :key="index" :label="item[idKey]">{{ item[nameKey] }}</el-checkbox>
		</el-checkbox-group>
		<i class="iconfont icon-filter-filled screen" :class="{'active': screenList && screenList.length || radioValue}" slot="reference"></i>
  </el-popover>
	</div>
</template>

<script>
export default {

	props: {
		name: {
			type: String,
      default: "",
		},
    list: {
      type: Array,
      default: function () {
        return [];
      }
    },
    nameKey: {
      type: String,
      default: 'name'
    },
    idKey: {
      type: String,
      default: 'id'
    },
    isRadio: Boolean
	},

	data: function () {
		return {
			popoverVisable: false, // 是否显示弹出框
			screenList: [], // 筛选框选中的值
      radioValue: '' // 单选值
		}
	},

	methods: {

		// 展示弹出框
		showPopover: function () {
			this.popoverVisable = !this.popoverVisable;
		},

		// 提交筛选内容
		screenSubmit: function () {
      if (this.isRadio) {
        this.$emit("screenSubmit", { key: this.name, value: this.radioValue });
      } else {
        this.$emit("screenSubmit", { key: this.name, value: this.screenList });
      }
		}
	}
}
</script>

<style lang="less" scoped>
  @import '~@/style/variables.less';

	.mine-table-screen {
		display: inline;
		margin-left: 10px;
	}

	.screen {
		font-size: 14px !important;
		color: #8c8c8c;
		cursor: pointer;
		font-weight: 500;
    outline: none;
    &.active {
      color: @--color-primary;
    }
	}

	/deep/ .el-checkbox {
		display: block;
		padding: 3px;
		margin-right: 0px !important;
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: rgba(0,0,0,0.85);
		line-height: 30px;
		font-weight: 400;
		padding-left: 13px;
		border-bottom: solid 1px #f5f5f5;
	}

	/deep/ .el-checkbox .el-checkbox__inner {
		border-radius: 3px;
    margin-right: 5px;
	}

  .el-radio-group {
    width: 100%;
  }

  /deep/ .el-radio {
		display: block;
		padding: 3px;
		margin-right: 0px !important;
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: rgba(0,0,0,0.85);
		line-height: 30px;
		font-weight: 400;
		padding-left: 13px;
		border-bottom: solid 1px #f5f5f5;
	}
</style>
